<!DOCTYPE html><!--前台显示商品页面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/mainHeader::main_header('商品')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="mainContainer sixteen container">
    <div th:replace="common/HeaderBlock::block"></div>
    <!--Content Block-->
    <section class="content-wrapper">
        <div class="content-container container">
            <div class="col-left">
                <div class="block man-block">
                    <div class="block-title" id="fCate"></div>
                    <ul id="fUl">

                    </ul>
                </div>

                <div class="block compare-block">
                    <div class="block-title">COMPARE PRODUCTS</div>
                    <ul>
                        <li>You have no items to compare</li>
                    </ul>
                </div>
                <div class="paypal-block">
                    <a href="#" title="Paypal"><img src="/static/images/paypal_img.png" title="Paypal"
                                                    alt="Paypal"/></a>
                </div>
            </div>
            <div class="col-main">
                <div class="new-product-block" id="pageDiv">

                </div>
            </div>
        </div>
    </section>
    <div th:replace="common/footer::footer"></div>
</div>
</body>
<script>
    const href = window.location.href;
    let fid;//父分类id
    let did = 0;//默认id为父id下第一个id  显示此类商品
    if (href.includes('&')) {
        fid = href.split('&')[1].split('=')[1];
        did = href.split('?')[1].split('&')[0].split('=')[1];
    } else {
        fid = href.split('=')[1];
    }
    //显示此页父分类
    $.ajax({
        type: 'GET',
        url: 'cate/cateName',
        data: {
            'id': fid
        },
        success: function (result) {
            $('#fCate').text(result.msg);
        }
    });
    //显示此分类下所有分类
    $.ajax({
        type: 'GET',
        url: 'cate/moreCate',
        data: {
            'id': fid
        },
        async: false,
        success: function (result) {
            const arr = result.data;
            if (did === 0) {
                did = arr[0].id;
            }
            const fUl = $("#fUl");
            for (let i = 0; i < arr.length; i++) {
                fUl.append("<li><a href='product?id=" + arr[i].id + "&fid=" + fid + "'>" + arr[i].name + "</a></li>")
            }
        }
    });
    getPro(did, 1);

    //显示商品 默认第一个分类
    function getPro(id, num) {
        $.ajax({
            type: 'GET',
            url: 'pro/pagePro',
            data: {
                'id': id,
                'num': num
            },
            success: function (result) {
                const arr = result.data.list;
                const pageDiv = $('#pageDiv');
                let ul = $("<ul class='product-grid'></ul>");
                for (let i = 0; i < arr.length; i++) {
                    //每三个换一行
                    if (i % 3 === 0) {
                        ul = $("<ul class='product-grid'></ul>");
                    }
                    ul.append("<li><div class='pro-img'><img title='Freature Product' alt='Freature Product' src='\image\\" + arr[i].mainImage + "'></div>\n" +
                        "<div class='pro-content'><p>" + arr[i].name + "</p></div>\n" +
                        "<div class='pro-price'>￥" + arr[i].price + "</div>\n" +
                        "<div class='pro-btn-block'>\n" +
                        "<a class='add-cart left' onclick='addCartPro(" + arr[i].id + ")' title='Add to Cart'>加入购物车</a>\n" +
                        "<a class='add-cart right quickCart inline' onclick=\"xadmin.open('详情','detail?id=" + arr[i].id + "')\" title='Quick View'>查看详情</a></div>\n" +
                        "<div class='pro-link-block'>\n" +
                        "<div class='clearfix'></div>\n" +
                        "</div></li>");
                    pageDiv.append(ul);
                }
            }
        })
    }


</script>
<script>
    const ulBody = $('#ulBody');
    //先找到根类别
    $.ajax({
        type: 'GET',
        url: 'cate/listCate',
        async: false,
        success: function (result) {
            const data = result.data;//根分类
            for (let i = 0; i < data.length; i++) {
                const li1 = $('<li><a>' + data[i].name + '</a></li>');
                const ul1 = $('<ul></ul>');
                //由根分类id查找二级分类
                $.ajax({
                    type: 'GET',
                    url: 'cate/moreCate',
                    async: false,
                    data: {
                        'id': data[i].id
                    },
                    success: function (result1) {
                        const data1 = result1.data;//二级分类
                        for (let j = 0; j < data1.length; j++) {
                            ul1.append("<li><a href='product?id=" + data1[j].id + "'>" + data1[j].name + "</a></li>")
                        }
                    }
                });
                li1.append(ul1);
                ulBody.append(li1);
            }
        }
    })
</script>
</html>